<template>
  <div id="login">
    <el-tabs class="login-box" v-model="activeName" type="card" :stretch="true" @tab-click="chance">
      <el-tab-pane label="账号登录" name="first">
        <el-form :model="form1" ref="form1" size="normal" :rules="rules1">
          <el-form-item class="id-box" prop="id">
            <el-input class="id-input" prefix-icon="el-icon-user-solid" v-model="form1.id" ref="id"
                      type="text" :placeholder="idvalue" maxlength="8"></el-input>
          </el-form-item>
          <el-form-item class="pwd-box" prop="pwd">
            <el-input class="pwd-input" prefix-icon="el-icon-lock" v-model="form1.pwd" ref="pwd1"
                      type="text" :placeholder="pwd1value" maxlength="20" show-password
                      @keyup.enter.native="login1('form1')"></el-input>
          </el-form-item>
          <el-form-item class="lobu-box">
            <el-button class="login-button" v-on:click="login1('form1')">立即登录</el-button>
          </el-form-item>
          <el-link class="red" v-on:click="toreg()" type="info" :underline="false">我要注册</el-link>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机登录" name="second">
        <el-form :model="form2" ref="form2" size="normal" :rules="rules2">
          <el-form-item class="id-box" prop="tel">
            <el-input class="id-input" prefix-icon="el-icon-phone" v-model="form2.tel" ref="tel"
                      type="text" :placeholder="telvalue" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item class="pwd-box" prop="pwd">
            <el-input class="pwd-input" prefix-icon="el-icon-lock" v-model="form2.pwd" ref="pwd2"
                      type="text" :placeholder="pwd2value" maxlength="20" show-password
                      @keyup.enter.native="login2('form2')"></el-input>
          </el-form-item>
          <el-form-item class="lobu-box">
            <el-button class="login-button" v-on:click="login2('form2')">立即登录</el-button>
          </el-form-item>
          <el-link class="red" v-on:click="toreg()" type="info" :underline="false">我要注册</el-link>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    let cid = (rule, value, callback) => {
      if (!value) {
        callback(new Error('账号不能为空！'));
      } else if (!Number.isInteger(value / 1)) {
        callback(new Error('请输入正确的账号格式！（应为数字字符串）'));
      }
      callback();
    };
    let ctel = (rule, value, callback) => {
      //检测数据是否符合要求
      if (!value) {
        //判断数据是否为空
        callback(new Error('手机号不能为空！'));
        //返回错误信息
      } else if (!Number.isInteger(value / 1)) {
        //判断数据是否为数字字符串
        callback(new Error('请输入正确的手机号格式！（应为数字字符串）'));
        //返回错误信息
      } else if (value < 10000000000) {
        //判断数据是否符合长度要求
        callback(new Error('手机号不足11位！'));
        //返回错误信息
      }
      callback();
      //返回正确信息
    };
    return {
      idvalue: '请输入账号',
      pwd1value: '请输入密码',
      telvalue: '请输入手机号',
      pwd2value: '请输入密码',
      form1: {
        id: '',
        pwd: '',
      },
      form2: {
        tel: '',
        pwd: '',
      },
      user: {},
      fullscreenLoading: false,
      activeName: 'first',
      rules1: {
        id: [
          {validator: cid, trigger: 'blur'}
        ],
        pwd: [
          {required: true, message: '密码不能为空！', trigger: 'blur'},
        ]
      },
      rules2: {
        tel: [
          {validator: ctel, trigger: 'blur'},
        ],
        pwd: [
          {required: true, message: '密码不能为空！', trigger: 'blur'},
        ]
      }
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.fullscreenLoading = true;
      if (sessionStorage.getItem("user")) {
        this.$router.push("/")//登录成功后的页面跳转
      }
      this.fullscreenLoading = false;
    },
    login1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 调用规则检测输入的数据是否符合要求
          axios.get("api/user/login/byid", {
            // 使用axios中get请求方式向后端获取数据
            // 在main.js中设置后端端口，请求时自动在url前加入后端地址
            params: {
              // 发送params形式的数据
              id: this.form1.id,
              pwd: this.form1.pwd
            }
          }).then((res) => {
            // 成功从后端获取返回信息
            if (res.data.code === '0') {
              // 后端请求数据成功
              this.$message({
                showClose: true,
                type: "success",
                message: "登录成功！",
              })
              // 显示登录成功消息
              sessionStorage.setItem("user", JSON.stringify(res.data.data))
              // 创建本地存储
              setTimeout(() => {
                location.reload()
              }, 1000);
              // 延时1秒刷新页面
            } else {
              // 后端请求数据失败
              this.$message({
                showClose: true,
                type: "error",
                message: "账号不存在或密码错误！"
              })
              // 返回失败信息
            }
          })
        }
      })
    },
    login2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          axios.get("api/user/login/bytel", {
            params: {
              tel: this.form2.tel,
              pwd: this.form2.pwd
            }
          }).then((res) => {
            this.fullscreenLoading = false;
            if (res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "登录成功！",
              })
              sessionStorage.setItem("user", JSON.stringify(res.data.data))
              setTimeout(() => {
                location.reload()
              }, 1000);
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: "手机号不存在或密码错误！",
              })
            }
          })
        }
        /*else {
          this.$message({
            showClose: true,
            type: "error",
            message: "请输入手机号和密码！",
          })
        }*/
      })
    },
    chance(tab) {
      if (tab.index === '1') {
        if (this.form1.id !== '') {
          this.form2.tel = this.form1.id
          this.form1.id = ''
        }
        if (this.form1.pwd !== '') {
          this.form2.pwd = this.form1.pwd
          this.form1.pwd = ''
        }
        this.$refs["form1"].resetFields();
      } else if (tab.index === '0') {
        if (this.form2.tel !== '') {
          while (this.form2.tel > 99999999) {
            this.form2.tel = (this.form2.tel - (this.form2.tel % 10)) / 10
          }
          this.form1.id = this.form2.tel
          this.form2.tel = ''
        }
        if (this.form2.pwd !== '') {
          this.form1.pwd = this.form2.pwd
          this.form2.pwd = ''
        }
        this.$refs["form2"].resetFields();
      }
    },
    toreg() {
      this.$router.push("/register")//页面跳转
    }
  }
}
</script>

<style scoped>
#login {
  width: 100%;
  min-height: 666px;
}

.login-box {
  height: 310px;
  width: 450px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  justify-content: space-around;
}

/deep/ #tab-first {
  border-top-left-radius: 25px;
}

/deep/ #tab-second {
  border-top-right-radius: 25px;
}

/deep/ .is-top {
  border: 0 !important;
}

/deep/ .el-tabs__item {
  background-color: #354e66;
  font-size: 17px;
  font-weight: bold;
  color: #f9bf4b;
}

/deep/ .is-active {
  background-color: transparent;
  color: #409EFF;
}

.id-box {
  padding-top: 20px;
}

.id-box, .pwd-box {
  padding-bottom: 30px;
  width: 300px;
  display: flex;
  margin: auto;
  justify-content: center;
}

.id-input, .pwd-input {
  width: 300px;
  margin: auto;
}

.lobu-box {
  height: 25px;
}

.red {
  padding-top: 5px;
  font-size: 15px;
}

.login-button {
  width: 120px;
  height: 40px;
  color: #f9bf4b;
  font-size: 17px;
  font-weight: bold;
  background: #354e66;
}
</style>